<template>
  <div class="account">
    <ul class="nav">

      <li class="list1">
        <nuxt-link to="/account">会员中心</nuxt-link>
        <dl>
          <dt>
            <nuxt-link to="/account">账户设置</nuxt-link>
          </dt>
          <dt>
            <nuxt-link to="/account">我的收藏</nuxt-link>
          </dt>
          <dt>
            <nuxt-link to="/account">浏览记录</nuxt-link>
          </dt>
        </dl>
      </li>
      <li class="list2">
        <nuxt-link to="/order">我的订单</nuxt-link>

      </li>
    </ul>
  </div>

</template>

<script>
export default {
  name: "user",
  data() {
    return {
      user_status: false,
      username: "fovegage"
    }
  }
}
</script>

<style scoped lang="scss">


.account {
  float: right;
  padding: 0;
  z-index: 999;
  line-height: 40px;

  .nav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    height: 40px;

    > li {
      float: left;
      width: 78px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;

      a {
        color: #999;

        &:hover {
          color: #31BBAC;
        }
      }

      &.list:hover {
        border: 1px solid #E5E5E5;
        border-top: none;

        > dl {
          display: block;
        }

        .subContainer {
          display: flex;
        }
      }

      dl {
        background: #fff;
        display: none;
        z-index: 999;

        dd {
          line-height: 35px;

          &:hover {
            color: #31BBAC;
          }
        }
      }

      &.member {
        dl {
          width: 140%;
          position: relative;
          border-top: 1px solid #e5e5e5;
          left: -31px;
          top: -1px;
          border-bottom: 1px solid #e5e5e5;
          border-left: 1px solid #E5E5E5;

          &:before {
            content: " ";
            display: block;
            background: #fff;
            height: 4px;
            width: 76px;
            position: absolute;
            top: -1px;
            right: 0;
          }
        }

        &:hover {
          border-bottom: none;
        }
      }


    }
  }
}
</style>
